<template>
  <div class="bind-phone">
    <div class="div-input">
      <label>手机号码</label>
      <input type="num" maxlength="11" v-model="phone" name="phone" placeholder="请输入新的手机号码">
    </div>
    <div class="div-input border-none">
      <label>短信验证码</label>
      <input type="text" name="code" v-model="codes" placeholder="请输入验证码">
      <!-- <span class="ash" v-if="isCount">{{time}}s</span> -->
      <!-- <span v-else @click="bind_mobiles">短信验证</span> -->
      <span>短信验证</span>
    </div>
    <span class="submit-btn">提交</span>
    <!-- <span class="submit-btn" @click="binds">提交</span> -->
  </div>
</template>

<script type="text/javascript"> 
  import { AlertModule } from 'vux'
  // import { bind_mobile, bind, check_if_sendCode } from '@/api/api'
  export default {
    data () {
      return {
        phone: '',
        isCount: false,
        time: 60,
        codes: '',
        code_copy: '',
      }
    },
    created () {
      // if(sessionStorage.getItem('time') > 0 && sessionStorage.getItem('time') < 60){
      //   this.time = sessionStorage.getItem('time')
      //   this.count_down()
      //   this.isCount = true
      // }
      // this.code = Math.floor(Math.random()*100000)
    },
    methods: {    
      router (path) {
        this.$router.push(path)
      },
      // bind_mobiles () {
      //   if(this.phone.length < 1){
      //     AlertModule.show({
      //       title: '系统提示',
      //       content: '请输入手机号码',
      //       onHide: () => {
      //         return
      //       }
      //     })
      //   }
      //   var jsonData = {
      //     username: this.phone,
      //     methods: 'web'
      //   }
      //   check_if_sendCode(jsonData).then((res) => {
      //     if(res.data.status){            
      //       bind_mobile(this.phone, this.code).then((res1) => {
      //         if(res1.data.status){
      //           this.isCount = true
      //           this.code_copy = res1.data.send_code
      //           AlertModule.show({
      //             title: '温馨提示',
      //             content: res1.data.info,
      //             onHide: () => {
      //               this.count_down()
      //             }
      //           })
      //         }
      //       })
      //     }else{
      //       AlertModule.show({
      //         title: '温馨提示',
      //         content: res.data.info,
      //       })
      //     }
      //   }).catch((err) => {
      //     AlertModule.show({
      //       title: '温馨提示',
      //       content: '绑定错误',
      //     })
      //     console.dir(err)
      //   })
      // },
      // count_down () {
      //   var _send  = setInterval(() => {
      //     if(this.time>0){
      //       this.time--
      //     }else{
      //       this.isCount = false
      //       clearInterval(_send)
      //       this.time = 60
      //     }     
      //     sessionStorage.setItem('time', this.time)   
      //   },1000)
      // },
      // binds () {
      //   if(this.codes != this.code_copy || this.codes != this.code){
      //     AlertModule.show({
      //       title: '系统提示',
      //       content: '验证码不正确',
      //       onHide: () => {
      //       }
      //     })
      //     return
      //   }
      //   bind(this.phone).then((res) => {
      //     if(res.data.status == 1){
      //       AlertModule.show({
      //         title: '系统提示',
      //         content: '绑定成功',
      //         onHide: () => {
      //           sessionStorage.setItem('phone', this.phone)
      //           this.$router.push({path: './personalCenter'})
      //         }
      //       })
      //     }else{
      //       AlertModule.show({
      //         title: '温馨提示',
      //         content: res.data.info,
      //         onHide: () => {
      //           this.codes = ''
      //         }
      //       })
      //     }       
      //   }).catch((err) => {
      //     console.log(err)
      //   })
      // }
    }
  }
</script>

<style lang="stylus" scoped>
  .bind-phone
    background-color #f2f2f2
    height 100vh
    width 100vw
    .div-input
      display flex
      line-height 5rem
      height 5rem
      overflow hidden
      padding 0 1.5rem
      background-color #fff
      border-bottom 1px solid #e5e5e5
      position relative
      label
        width 6rem
        font-size 1.5rem
      input
        color #333
        background-color #fff
        height 3rem
        margin-top 1rem
        width 100%
        padding-left 1.5rem
        outline none
        font-size 1.5rem
        &::-webkit-input-placeholder
          color #999
      span
        width 9.2rem
        height 3.3rem
        line-height 3.3rem
        text-align center
        background-color #43A047
        border-radius .3rem
        position absolute
        right 1.5rem
        color #fff
        font-size 1.5rem
        top .85rem
      .ash
        background-color #ccc
    .border-none
      border none
    .submit-btn
      line-height 5rem
      background-color #43A047
      border-radius .3rem
      width 92%
      position relative
      left 4%
      display block
      text-align center
      font-size 1.6rem
      font-weight 500
      color #fff
      margin-top 1.5rem
</style>